<template>
    <div class="markday">
        <!-- 顶部栏 -->
        <div class="header">
            <header-cmp>
                <template v-slot:txt>
                    <p class="title">倒数本</p>
                </template>
                <template v-slot:set>
                    <span class="iconfont icon-shezhi"></span>
                </template>
                <template v-slot:icon>
                    <span class="iconfont icon-tianjia2" @click="showPopup"></span>
                </template>
            </header-cmp>
        </div>

        <!-- 记事本 -->
        <div class="notebook">
            <ul class="booklist">
                <li class="book_item">
                    <div class="addBook" @click="showPopup">
                        <span class="iconfont icon-tianjia"></span>
                        <p>添加记事本</p>
                    </div>
                    <van-popup v-model="show" close-icon-position="top-left" close-icon="exchange" color="#fff"
                        closeable position="right" :style="{ height: '100%', width: '100%' }">
                        <add-book @show-addCmp="recive"></add-book>
                    </van-popup>
                </li>
                <li class="book_item" v-for="item in booklist" :key="item.id">
                    <div class="books" @click="showNote(item.id)" :style="{backgroundImage: `url(${item.book_cover})`}">
                        <p class="books_title">{{item.title}}</p>
                    </div>
                </li>
                <van-popup v-model="addNote" close-icon-position="top-left" close-icon="exchange" color="#fff" closeable
                    position="right" :style="{ height: '100%', width: '100%' }">
                    <add-note :bookID="bookID"></add-note>
                </van-popup>
            </ul>
        </div>

        <!-- 记事本列表 -->
        <div class="note_list">
            <div class="note_item" @click="showNote(item.id)" v-for="(item,index) in booklist" :key="index">
                <div class="icon" :style="{backgroundImage: `url(${item.book_icon_url})`}"></div>
                <p class="note_title">{{item.title}}</p>
            </div>
        </div>
        <!-- <button @click="foo">123</button> -->
    </div>
</template>

<script>
import { get } from "@/https/request";
import HeaderCmp from "@/components/common/HeaderCmp/HeaderCmp.vue"
import AddBook from "./AddBook.vue"
import AddNote from "./AddNote.vue"
export default {
    name: 'Menu',
    components: {
        HeaderCmp,
        AddBook,
        AddNote
    },
    data() {
        return {
            show: false,
            addNote: false,
            iconList: [
                { id: 1, icon_src: require('@/static/img/icon/love.png') },
                { id: 2, icon_src: require('@/static/img/icon/toolbox.png') },
                { id: 3, icon_src: require('@/static/img/icon/huojian.png') },
                { id: 4, icon_src: require('@/static/img/icon/dangao.png') },
                { id: 5, icon_src: require('@/static/img/icon/xingxing.png') },
                { id: 6, icon_src: require('@/static/img/icon/diqiu.png') },
                { id: 7, icon_src: require('@/static/img/icon/yinyue.png') },
                { id: 10, icon_src: require('@/static/img/icon/zhuanshi.png') },
                { id: 11, icon_src: require('@/static/img/icon/qianbao.png') },
                { id: 12, icon_src: require('@/static/img/icon/youxiji.png') },
                { id: 13, icon_src: require('@/static/img/icon/rili1.png') },
                { id: 14, icon_src: require('@/static/img/icon/rili2.png') },
            ],
            booklist: [],
            bookID: 1
        }
    },
    methods: {
        showPopup() {
            this.show = true
        },
        // 接受Addbook子组件的信息
        recive(string) {
            this.show = string
            this.getBooklist()
        },
        // 获取用户笔记本
        getBooklist() {
            get('http://192.168.35.43:3005/books/usr_books')
                .then((data) => {
                    // 匹配图标
                    data.result.forEach(element => {
                        // console.log(element);
                        this.iconList.forEach(item => {
                            if (element.book_icon == item.id) {
                                // console.log(item.id);
                                element.book_icon_url = item.icon_src
                                // console.log(element.book_icon);
                            }
                        })
                    });
                    this.booklist = data.result
                })
        },
        showNote(id) {
            this.addNote = true
            this.bookID = id
        },
        foo() {
            let id = Math.random().toString().slice(2, 8)
            // console.log(id);
            this.getBooklist()
        }
    },
    created() {
        this.getBooklist()
    },
    updated() {
        this.getBooklist()
    }
}
</script>

<style lang="scss" scoped>
.markday {
    margin-bottom: 60px;

    .header {
        position: relative;

        .title {
            color: #fff;
            font-size: 24px;
            margin-left: 10px;
        }

        .icon-shezhi {
            position: absolute;
            right: 50px;
            font-size: 30px;
        }

        .icon-tianjia2 {
            position: absolute;
            right: 10px;
            font-size: 30px;
        }
    }

    .notebook {
        background-color: #e7e7e7;
        padding: 8px 10px 5px;

        .booklist {
            display: grid;
            // flex-wrap: wrap;
            // justify-content: flex-start;
            grid-template-columns: 1fr 1fr 1fr 1fr;

            .book_item {
                margin: 5px 6px;

                i {
                    color: #fff;
                }

                .addBook {
                    width: 75px;
                    height: 100px;
                    background-color: #fff;
                    padding-top: 20px;
                    font-size: 12px;
                    text-align: center;
                    line-height: 40px;
                    border-radius: 0px 10px 10px 0px;

                    .iconfont {
                        border-radius: 50%;
                        border: 1px solid;
                        display: block;
                        width: 30px;
                        height: 30px;
                        text-align: center;
                        line-height: 30px;
                        margin: auto;
                        color: #fff;
                        background-color: rgba(255, 40, 40, 0.548);
                    }
                }

                .books {
                    // width: 75px;
                    height: 100px;
                    // background-color: #fff;
                    border-radius: 0px 10px 10px 0px;
                    position: relative;

                    // 背景图自适应
                    background: url(../../static/img/bookImg.jpeg) no-repeat;
                    background-repeat: no-repeat;
                    background-size: 100% 100%;
                    -moz-background-size: 100% 100%;

                    .books_title {
                        background-color: rgba(255, 255, 255, 0.751);
                        width: 100%;
                        font-size: 14px;
                        text-align: center;
                        position: absolute;
                        bottom: 10px;
                        color: rgb(22, 167, 240);
                        font-weight: 700;
                    }
                }
            }

        }
    }

    .note_list {
        .note_item {
            display: flex;
            align-items: center;
            height: 50px;
            padding: 10px;
            border-bottom: 1px solid #ccc;

            .icon {
                width: 30px;
                height: 30px;
                background-size: cover;
            }

            .note_title {
                font-size: 16px;
                margin-left: 10px;

            }
        }
    }

}
</style>